<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h5>firstChild 属性返回被选节点的第一个子节点。注意：如果选定的节点没有子节点，则该属性返回 null。</h5>
    <h6>appendChild 只能添加一个元素。</h6>
</div>

<script>
    const fragment = document.createDocumentFragment()
    const appEle = document.getElementById('app')
    let child = appEle.firstChild
    while (child) {
        // 将 appEle 中的第一个子节点添加到 fragment 中，同时 appEle 中该子节点被移除
        fragment.appendChild(child)
        // 如果 appEle 中没有子节点，child 值为 null
        child = appEle.firstChild
    }
    console.log(fragment);
</script>

</body>
</html>
